
<extend name="./public/frame.html"/>
<block name="content">
	<blockquote class="layui-elem-quote search">
		<form action="" method="post">
		<div class="layui-inline">
			<select name="province_id" id="province_id" class="layui-input" lay-filter="province" style="width: 120px;" onclick="getProvinceList();">
				<option value="">请选择省份</option>
				<?php foreach($provinceList as $key=>$value):?>
				<option value="<?php echo $value['region_id'];?>" <?php if($value['region_id'] == $province_id):?>selected<?php endif;?>><?php echo $value['region_name'];?></option>
				<?php endforeach;?>
			</select>
		</div>
		<div class="layui-inline">
			<select name="city_id" id="city_id" class="layui-input" lay-filter="city_id" style="width: 120px;">
				<option value="">请选择城市</option>
				<?php foreach($city_list as $key=>$value){ ?>
				<option value="<?php echo $value['region_id'];?>" <?php if($value['region_id'] == $city_id):?>selected<?php endif;?>><?php echo $value['region_name'];?></option>
				<?php } ?>
			</select>
		</div>
		<div class="layui-input-inline">
			<div class="layui-inline">
				<input type="text" class="layui-input date" name="start_time" value="<?php echo date('Y-m-d H:i:s',$start_time);?>" placeholder="下单时间-起" style="width: 160px;">
			</div>
			<div class="layui-inline">
				<input type="text" class="layui-input date" name="end_time" value="<?php echo date('Y-m-d H:i:s',$end_time);?>" placeholder="下单时间-止" style="width: 160px;">
			</div>
		</div>
		<div class="layui-inline">
			<input class="layui-btn" type="submit" value="搜索">
		</div>
		</form>
	</blockquote>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=Gf02CuoNVIwHG5m7G014HWfGkq4ysWhG"></script>
	<script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
	<style type="text/css">
		ul,li{list-style: none;margin:0;padding:0;float:left;}
		html{height:100%}
		body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";}
		#container{height:600px;width:100%;}
		#r-result{width:100%;}
	</style>
	<body>
	<div id="container"></div>
	<div id="r-result">
		<input type="button"  onclick="openHeatmap();" value="显示热力图"/><input type="button"  onclick="closeHeatmap();" value="关闭热力图"/>
	</div>
	</body>
	</html>
	<script type="text/javascript">
		var map = new BMap.Map("container");          // 创建地图实例
		var point = new BMap.Point(<?php echo $location['lng'];?>,<?php echo $location['lat'];?>);
		map.centerAndZoom(point, 12);             // 初始化地图，设置中心点坐标和地图级别
		map.enableScrollWheelZoom(); // 允许滚轮缩放
		var points =[
			<?php foreach($result as $key=>$value):?>
			{"lng":<?php echo $value['lng'];?>,"lat":<?php echo $value['lat'];?>,"count":<?php echo $value['num'];?>},
			<?php endforeach;?>
			];

		if(!isSupportCanvas()){
			alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
		}
		heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
		map.addOverlay(heatmapOverlay);
		heatmapOverlay.setDataSet({data:points,max:100});
		//是否显示热力图
		function openHeatmap(){
			heatmapOverlay.show();
		}
		function closeHeatmap(){
			heatmapOverlay.hide();
		}
		openHeatmap();
		//判断浏览区是否支持canvas
		function isSupportCanvas(){
			var elem = document.createElement('canvas');
			return !!(elem.getContext && elem.getContext('2d'));
		}
		layui.use(['table','laydate' ],function () {
			var table = layui.table, laydate = layui.laydate;
			//下单时间检索
			lay('.date').each(function(){
				laydate.render({
					elem: this
					,type: 'datetime'
					,trigger: 'click'
				});
			});
		});
		//选择省市切换
		function getProvinceList(){
			$("#city_id").empty();
			$("#city_id").append('<option value=>请选择城市</option>');
			var province_id = $("#province_id").val();
			$.ajax({
				url:'{:url("/admin/Franchisee/cityList")}',
				async:true,
				//dataType:'json',
				type:'post',
				data:{'province_id':province_id},
				success:function(res){
					$("#city_id").append(res);
				},
				error:function(e){
					layer.msg('请求错误');return false;
				}
			})
		};
	</script>
	<!--<div id="container" class="container" style="width: 100%;height:600px;"></div>
	<script src="https://a.amap.com/Loca/static/dist/jquery.min.js"></script>
	<script src="https://webapi.amap.com/maps?v=1.4.15&plugin=Map3D&key=455420bce40f113a7ce5717684609891"></script>
	<script src="https://webapi.amap.com/loca?v=1.3.1&key=455420bce40f113a7ce5717684609891"></script>
	<script>
		var url = '<?php echo $url;?>';
		var map = new AMap.Map('container', {
			mapStyle: 'amap://styles/midnight',
			center: [<?php echo $location['lng'];?>,<?php echo $location['lat'];?>],
			zoom: 11.5,
			features: ['bg', 'road'],
			skyColor: '#eee',
			pitch: 50,
			viewMode: '3D'
		});
		$.get(url, function (csv) {
			var layer = new Loca.PointCloudLayer({
				map: map,
				fitView: false
			});
			layer.setData(csv, {
				lnglat: function (obj) {
					var value = obj.value;
					return [value['lng'], value['lat']];
				},
				type: 'csv'
			});
			layer.setOptions({
				style: {
					radius: 35,
					color: '#FE0105',
					borderWidth: 10,
					borderColor: '#FFFFFF',
					opacity: 1,
				}
			});

			layer.render();
		});

	</script>-->
</block>

